<template>
  <div id="app">
    <h2>计算属性</h2>
    <input type="checkbox" id="all" v-model="all" />
    <label for="all">全选</label>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.boo" />
        {{ item.name }} -- {{ item.score }}
      </li>
    </ul>
    <p>总成绩是： {{ total }}</p>
    <p>平均分： {{ avg }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 2, name: '小明', score: 85, boo: true },
        { id: 3, name: '小花', score: 76, boo: false },
        { id: 5, name: '小红', score: 98, boo: false },
        { id: 6, name: '小蓝', score: 100, boo: true },
        { id: 9, name: '小粉', score: 34, boo: true }
      ]
    }
  },
  computed: {
    total () {
      return this.list.reduce((t, c) => {
        return t + c.score
      }, 0)
    },
    avg () {
      return (this.total / this.list.length).toFixed(2) // 保留两位小数
    },
    all: {
      get () {
        return this.list.every(item => item.boo === true) // false
      },
      set (abc) {
        // console.log(abc) // 接收到的true或false
        this.list.forEach(item => {
          item.boo = abc
        })
      }
    }
  }
}
</script>

<style></style>
